<%--
  Created by IntelliJ IDEA.
  User: 沐硕
  Date: 2024/6/21
  Time: 21:30
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
</head>
<body>
<section id="billboard" class="position-relative overflow-hidden bg-light-blue">
    <!-- 大字幕区域开始，具有类名position-relative、overflow-hidden和bg-light-blue -->

    <!-- Swiper轮播开始，具有类名main-swiper -->
    <div class="swiper main-swiper">
        <!-- Swiper的轮播项容器 -->
        <div class="swiper-wrapper">
            <!--            汽车-->
            <div class="swiper-slide">
                <div class="container">
                    <br>
                    <br>
                    <br>
                    <br>
                    <div class="row d-flex flex-wrap align-items-center">
                        <div class="col-md-3">
                            <div class="banner-content">
                                <h1 class="display-2 text-uppercase text-dark pb-5">很酷的小米汽车！</h1>
                                <a href="shop.html" class="btn btn-medium btn-dark text-uppercase btn-rounded-none">购买产品</a>
                            </div>
                        </div>
                        <div class="col-md-8">
                            <div class="image-holder">
                                <img src="images/SU7.jpg" alt="banner">
                            </div>
                        </div>
                    </div>
                </div>
            </div>


            <!--            女装-->
            <div class="swiper-slide">
                <div class="container">
                    <br>
                    <br>
                    <br>
                    <br>
                    <div class="row d-flex flex-wrap align-items-center">
                        <div class="col-md-6">
                            <div class="banner-content">
                                <h1 class="display-2 text-uppercase text-dark pb-5">潮流服饰!</h1>
                                <a href="shop.html" class="btn btn-medium btn-dark text-uppercase btn-rounded-none">购买产品</a>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="image-holder">
                                <img src="images/Cloth.jpg" alt="banner">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!--            汉服-->
            <div class="swiper-slide">
                <div class="container">
                    <br>
                    <br>
                    <br>
                    <br>
                    <div class="row d-flex flex-wrap align-items-center">
                        <div class="col-md-5">
                            <div class="banner-content">
                                <h1 class="display-2 text-uppercase text-dark pb-5">最美的汉服服装!</h1>
                                <a href="shop.html" class="btn btn-medium btn-dark text-uppercase btn-rounded-none">购买产品</a>
                            </div>
                        </div>
                        <div class="col-md-7">
                            <div class="image-holder">
                                <img src="images/hanfu.jpg" alt="banner">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!--            零食-->
            <div class="swiper-slide">
                <div class="container">
                    <br>
                    <br>
                    <br>
                    <br>
                    <div class="row d-flex flex-wrap align-items-center">
                        <div class="col-md-5">
                            <div class="banner-content">
                                <h1 class="display-2 text-uppercase text-dark pb-5">超爱吃的小零食!</h1>
                                <a href="shop.html" class="btn btn-medium btn-dark text-uppercase btn-rounded-none">购买产品</a>
                            </div>
                        </div>
                        <div class="col-md-7">
                            <div class="image-holder">
                                <img src="images/Snack（4）.png" alt="banner">
                            </div>
                        </div>
                    </div>
                </div>
            </div>



        </div>
    </div>

    <!-- Swiper的箭头图标，用于控制轮播切换 -->
    <div class="swiper-icon swiper-arrow swiper-arrow-next">
        <!-- 右箭头图标 -->
        <svg class="chevron-right">
            <use xlink:href="#chevron-right" />
        </svg>
    </div>
    <div class="swiper-icon swiper-arrow swiper-arrow-prev">
        <!-- 左箭头图标 -->
        <svg class="chevron-left">
            <use xlink:href="#chevron-left" />
        </svg>
    </div>

</section>
</body>
</html>
